<template>
  <div class="eclipse">
    <div class="eclipse-before"></div>
    <div class="eclipse-after"></div>
  </div>  
</template>

<style scoped>
.eclipse{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: skyblue;
  animation: bgChange 5s linear infinite;
}

.eclipse-before,
.eclipse-after{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin: auto;
}

.eclipse-after{
  background: skyblue;
  animation: eclipse 5s linear infinite;
}

.eclipse-before{
  background: #fff;
  animation: shadow 5s linear infinite;
}

@keyframes bgChange{
  0%,100%{
    background: skyblue;
  }

  45%,60%{
    background: #282c34;
  }
}

@keyframes shadow{
  50%{
    box-shadow: 0 0 10px 5px #fff;
  }
}

@keyframes eclipse{
  0%{
    left: 300px;
    backgrond: skyblue;
  }
  45%,60%{
    left: 0;
    background: #282c34;
  }
  100%{
    left: -300px;
    background: skyblue;
  }
}
</style>